<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品详情</title>
  <link rel="stylesheet" href="css/top.css">
  <link rel="stylesheet" href="css/footer.css">
  <link rel="stylesheet" href="css/top-hover.css">
  <script src="js/axios.js"></script>
  <style>
    .top .top-f ul li:nth-child(1) a {
      color: #ffffff;
      font-weight: 400;
    }

    .details-main {
      position: relative;
      left: 0;
      top: 124px;
    }

    .list ul li:first-child {
      box-sizing: border-box;
      padding: 10px;
      border-bottom: 1px solid #999;
    }

    .list ul li:first-child a {
      margin-left: 20px;
      color: black;
    }

    .list ul li:first-child a:hover {
      text-decoration: underline;
    }

    .list ul li:nth-child(2) {
      width: 1000px;
      display: flex;
      margin: 0 auto;
    }

    .lists-img {
      width: 440px;
      display: flex;
      justify-content: space-around;
      box-sizing: border-box;
      padding: 20px;
    }

    .lists-img p img {
      width: 300px;
    }

    .lists-img p:nth-child(1) img {
      width: 40px;
    }

    .lists-details p:nth-child(2) {

      box-sizing: border-box;
      padding-bottom: 10px;
      border-bottom: 1px solid #999;
    }

    .lists-details p:nth-child(3) {
      margin-top: 10px;
    }

    .lists-details p:nth-child(3) span:nth-child(2),
    .lists-details p:nth-child(3) span:nth-child(5) {
      font-size: 20px;
      font-weight: 700;

    }

    .lists-details p:nth-child(3) span:nth-child(5) {
      color: red;
    }

    .lists-details p:nth-child(3) span:nth-child(3) {
      font-size: 28px;
      font-weight: 700;
      margin-right: 40px;
    }

    .lists-details p:nth-child(3) span:nth-child(6) {
      font-size: 28px;
      font-weight: 700;
      color: red;
    }

    .lists-details p:nth-child(4) span {
      margin-right: 50px;
    }

    .lists-details p:nth-child(4),
    .lists-details p:nth-child(5) {
      margin-top: 10px;
      background-color: #ed3029;
      color: white;
      padding-left: 10px;
    }

    .lists-details p:nth-child(5) span {
      margin-right: 20px;
    }

    .lists-details p:nth-child(5) span:nth-child(3) {
      float: right;
    }

    i {
      font-style: normal;
      color: #f8e50d;
    }

    .lists-details p:nth-child(6) {
      box-sizing: border-box;
      padding: 20px 0;
      border-bottom: 1px solid #999;
    }

    .lists-details p:nth-child(6) span:nth-child(1) {
      display: inline-block;
      background-color: #ffcccc;
      color: #f93d64;
      width: 40px;
      text-align: center;
      border: 1px solid #f93d64;
      margin-right: 10px;

    }

    .lists-details p:nth-child(7),
    .lists-details p:nth-child(8) {
      margin-top: 20px;
    }

    .lists-details p:nth-child(7) span:nth-child(2),
    .lists-details p:nth-child(8) span:nth-child(2) {
      box-sizing: border-box;
      padding: 4px;
      border: 1px solid #ed3029;
      color: #ed3029;
    }

    .lists-details p:nth-child(8) {

      padding-top: 10px;
    }

    .lists-details p:nth-child(9) {
      margin-top: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid #999;
    }

    .lists-details p:nth-child(9) input {
      width: 100px;
      height: 30px;
      font-size: 20px;
    }

    .lists-details p:nth-child(10) {

      box-sizing: border-box;
      padding: 20px 20px;
      border-bottom: 1px solid #999;
    }

    .lists-details p:nth-child(10) input {
      width: 180px;
      height: 50px;
      font-size: 26px;
      color: white;
      background-color: rgb(241, 7, 7);
      border: none;
      margin-right: 300px;
    }

    .s-text {
      margin-left: -20px;
      font-size: 12px;
    }

    .lists-details p:nth-child(11) {
      display: flex;
      justify-content: space-between;
      padding: 20px 30px 20px 0;

    }

    .lists-details p:nth-child(12) a {
      font-size: 14px;
    }

    .lists-details p:nth-child(12):hover {
      text-decoration: underline;
    }

    .details-2s {

      width: 1000px;
      margin: 0 auto;
      border: #999 1px solid;
      box-sizing: border-box;
      margin-top: 30px;

    }

    #details1 p {
      text-align: center;
      line-height: 30px;
      width: 200px;
      height: 30px;
      border-right: 1px solid #999;
      /* border-left: 1px solid #999; */
    }

    #details1 {
      display: flex;
      border-bottom: 1px solid #999;

    }

    #details2 {

      box-sizing: border-box;
      padding: 60px 0;
      ;


    }

    #details2 p {
      width: 800px;
      margin: 0 auto;
      text-align: center;
      display: none;
    }

    #details2 p:nth-child(3) {
      text-align: left;
    }
  </style>
</head>

<body>
  <div class="top">
    <div class="bg-top">
      <ul class="top-left">
        <li></li>
        <li>
          <a href="index.html">北京地区暂停发货说明，点击查看详情></a>
        </li>
      </ul>
      <ul class="top-right">
        <li class="log-btn"><a href="#">你好！欢迎光临</a></li>
        <li><a href="shoppingCart.html"><span></span> 购物车 <span class="Product-num">0</span></a></li>
        <li><a href="#"> <span></span>领取中心</a></li>
        <li><a href="#"> <span></span>微信商城</a></li>
      </ul>


    </div>
    <div class="top-f">
      <ul>
        <li><a href="index.html" class="top-f-active"> 商城首页</a></li>
        <li class="show">
          <a href="shouban.html"> 雕塑手办</a>
          <div class="hide1">
            <p><a href="#">大型雕塑</a></p>
            <p><a href="#">中型雕塑</a></p>
            <p><a href="#">限定手办</a></p>
            <p><a href="#">迷你手办</a></p>
            <p><a href="#">手办</a></p>
            <p><img src="img/霞.webp" alt=""></p>
          </div>
        </li>
        <li class="show"><a href="plushToy.html"> 服饰毛绒</a>

          <div class="hide1">
            <p><a href="#">毛绒玩偶</a></p>
            <p><a href="#">卫衣&夹克</a></p>
            <p><a href="#">T恤</a></p>
            <p><a href="#">K/DA服饰</a></p>
            <p><a href="#">其他</a></p>
            <p><img src="img/佐伊111.webp" alt=""></p>
          </div>
        </li>
        <li class="show"><a href="Life.html"> 生活周边</a>

          <div class="hide1 ">
            <p><a href="#">3C配件</a></p>
            <p><a href="#">日常用品</a></p>
            <p><a href="#">海报艺术</a></p>
            <p><a href="#">其他</a></p>
            <p><img src="img/哥哥.webp" alt=""></p>
          </div>
        </li>
        <li><a href="Brand.html"> 品牌联名</a></li>
        <li class="show"><a href="Promotion.html"> 促销专区</a>

          <div class="hide1 hide2">
            <p><a href="#">LPL系列专区</a></p>
            <p><img src="img/didi.webp" alt=""></p>
          </div>
        </li>
        <li><a href="#"> 手办收藏</a></li>
      </ul>
      <ul>
        <li>

          <input type="text" placeholder="洛与霞雕塑"><span></span>
        </li>
      </ul>
    </div>
  </div>
  <!-- 联系客服 -->

  <div class="spr-service">
    <p></p>
    <p>联系客服</p>
  </div>


  <div class="details-main">

    <div class="list">

      <ul>
        <!-- <li>
          <a href="index.html">商城首页</a>
          <span>></span>
          <a href="#">亚索</a>
        </li>
        <li>
          <div class="lists-img">

            <p>
              <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202202/20220214003734_94317.big.jpg" alt="">
            </p>
            <p>
              <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202202/20220214003734_94317.big.jpg" alt="">
            </p>
          </div>
          <div class="lists-details">
            <h1>【定金】HobbyMax联名-洛与霞 1/7中型雕塑</h1>
            <p>预定专享周边赠礼预计将于3月20日起陆续发货，魔法馈赠图标将在确认收货后发放至领取中心</p>
            <p><span>现价：</span><span>￥</span><span>1600.00</span><span>定金：</span><span>￥</span><span>320.00</span></p>
            <p>
              <span><i>预售</i></span>
              <span>已预定 <i>905</i> 件</span>
              <span>预售剩余<i></i></span>
            </p>
            <p>
              <span>满赠 </span>
              <span>助力开学季，阶梯满赠享好礼，赠品数量有限先到先得哦~</span>
              <span>详情》</span>
            </p>
            <p>
              <span>赠品</span>
              <span>魔法馈赠 图标（预定专享）×2</span>
            </p>
            <p>
              <span>颜色：</span>
              <span>尾款支付及雕塑发货时间预计为2023年5月起</span>
            </p>
            <p>
              <span>尺码：</span>
              <span>【定金320元，全款1690元】闪耀羽裳珍贵图标将在尾款支付后发放</span>
            </p>
            <p>
              <span>数量：</span>
              <input type="number" min="1" max="5" value="1">（库存充足）
            </p>
            <p>
              <input type="button" name="" id="" value="加入购物车">
              <span>收藏宝贝</span><br>
              <span class="s-text">商品将于2023年5月1日开始支付尾款 </span>

            </p>

            <p>
              <span>预售商品</span>
              <span>100%官方正品</span>
              <span>全场每单满299元包邮</span>
            </p>
            <p>
              <a href="#">点击查看《英雄联盟周边商城预售协议》</a>
            </p>
          </div>
        </li>


        <li class="details-2s">

          <div id="details1">

            <p style="background-color: #3d4145; color: #ffffff;">商品详情</p>
            <p>用户点评(0)</p>

            <p>售后服务</p>
          </div>

          <div id="details2">
            <p style="display: block;">
              <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202202/20220214003734_94317.big.jpg" alt="">
            </p>
            <p>
              <img src="https://js01.daoju.qq.com/zb/lolriotmall/pc/images/defaultnull.png" alt="">
              未找到商品评论
            </p>
            <p class="p3">


              7天无理由退换货<br>
              一、“七天无理由退换货”服务的商品品类划分<br>
              二、顾客提出“七天无理由退换货”服务的申请条件<br>
              三、“七天无理由退换货”服务的申请流程<br>


            </p>
          </div>
        </li> -->
      </ul>
    </div>




    <!-- footer -->
    <footer>
      <div class="footer-top">
        <p><a href=""><span>7</span> 7天无理由退换货</a></p>
        <p><a href=""><span>正</span>100%官方正品</a></p>
        <p><a href=""><span>免</span>全场每单满299元包邮</a></p>

      </div>

      <div class="footer-main">
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
      </div>

      <div class="footer-ab">
        <ul>
          <li> 关于商城 </li>
          <li> 服务条款 </li>
          <li> 合作伙伴 </li>
          <li> 法律声明 </li>
          <li> 经营者证照信息 </li>
        </ul>
      </div>

      <div class="footer-text">
        <ul>
          <li>
            <span></span>
            <span></span>
          </li>
          <li>
            北京京东世纪贸易有限公司提供客服支持 | 售后服务： https://wj.qq.com/s2/9280963/12ea
            Copyright (C) 1998 – 2018 Tencent. All Rights Reserved.腾讯公司 版权所有
          </li>
          <li>
            <img src="img/工商.png" alt="">
          </li>
        </ul>
      </div>
    </footer>
  </div>
  <script src="js/jq.js"></script>
  <script src="js/axios.js"></script>
  <script src="js/hover.js"></script>


  <script>
    let uid = localStorage.getItem("uid");
    console.log(uid);
    if (uid) {

      document.querySelector('.log-btn').innerHTML = '你好，欢迎回来';

      let url = 'http://jx.xuzhixiang.top/ap/api/cart-list.php';
      axios.get(url, {
        params: {
          id: uid
        },
      }).then(function (res) {
        console.log(res);
        let num = 0;
        res.data.data.forEach(v => {
          num = num * 1 + v.pnum * 1;
        });
        // console.log(num);
        document.querySelector('.Product-num').innerHTML = num;

      })
    } else {
      document.querySelector('.log-btn').innerHTML = '你好，请登录';
    }


    let obj = new URLSearchParams(location.search)
    console.log(obj.get('pid'));
    let pid = obj.get('pid');

    let url = "http://jx.xuzhixiang.top/ap/api/detail.php";
    axios.get(url, {
      params: {
        id: pid
      },
    }).then(function (res) {
      console.log(res.data.data);
      let obj = res.data.data;

      let str = `
      <li>
          <a href="index.html">商城首页</a>
          <span>></span>
          <a href="#">${obj.pname}</a>
        </li>
        <li>
          <div class="lists-img">

            <p>
              <img src="${obj.pimg}" alt="">
            </p>
            <p>
              <img src="${obj.pimg}" alt="">
            </p>
          </div>
          <div class="lists-details">
            <h1>【定金】HobbyMax联名-${obj.pname} 1/7中型雕塑</h1>
            <p>预定专享周边赠礼预计将于3月20日起陆续发货，魔法馈赠图标将在确认收货后发放至领取中心</p>
            <p><span>现价：</span><span>￥</span><span>${obj.pprice}</span><span>定金：</span><span>￥</span><span>320.00</span></p>
            <p>
              <span><i>预售</i></span>
              <span>已预定 <i>905</i> 件</span>
              <span>预售剩余<i></i></span>
            </p>
            <p>
              <span>满赠 </span>
              <span>助力开学季，阶梯满赠享好礼，赠品数量有限先到先得哦~</span>
              <span>详情》</span>
            </p>
            <p>
              <span>赠品</span>
              <span>魔法馈赠 图标（预定专享）×2</span>
            </p>
            <p>
              <span>颜色：</span>
              <span>尾款支付及雕塑发货时间预计为2023年5月起</span>
            </p>
            <p>
              <span>尺码：</span>
              <span>【定金320元，全款1690元】闪耀羽裳珍贵图标将在尾款支付后发放</span>
            </p>
            <p>
              <span>数量：</span>
              <input type="number" min="1" max="5" value="1" id="num">（库存充足）
            </p>
            <p>
              <input type="button" name="" id="" value="加入购物车" onclick="addCart(${obj.pid})">
              <span>收藏宝贝</span><br>
              <span class="s-text">商品将于2023年5月1日开始支付尾款 </span>

            </p>

            <p>
              <span>预售商品</span>
              <span>100%官方正品</span>
              <span>全场每单满299元包邮</span>
            </p>
            <p>
              <a href="#">点击查看《英雄联盟周边商城预售协议》</a>
            </p>
          </div>
        </li>


        <li class="details-2s" onmouseenter="Click()">

          <div id="details1">

            <p style="background-color: #3d4145; color: #ffffff;">商品详情</p>
            <p>用户点评(0)</p>

            <p>售后服务</p>
          </div>

          <div id="details2">
            <p style="display: block;">
              <img src="${obj.pimg}" alt=""><br>
              <b>${obj.pdesc}</b>
            </p>
            <p>
              <img src="https://js01.daoju.qq.com/zb/lolriotmall/pc/images/defaultnull.png" alt="">
              未找到商品评论
            </p>
            <p class="p3">


              7天无理由退换货<br>
              一、“七天无理由退换货”服务的商品品类划分<br>
              二、顾客提出“七天无理由退换货”服务的申请条件<br>
              三、“七天无理由退换货”服务的申请流程<br>


            </p>
          </div>
        </li>
      `;

      $('.list ul').html(str)
    })


    // 

    function Click() {

      // 
      let detailsBtn = document.querySelectorAll('#details1 p');
      let detailsBtn2s = document.querySelectorAll('#details2 p');

      // console.log(detailsBtn2s);
      detailsBtn.forEach(function (v, i) {

        v.onclick = function () {

          detailsBtn.forEach(function (v) {
            v.style.color = '#000031';
            v.style.backgroundColor = '';
          })
          v.style.backgroundColor = '#3d4145';
          v.style.color = 'white';
          detailsBtn2s.forEach(function (v) {
            v.style.display = 'none';
          })
          detailsBtn2s[i].style.display = 'block';

        }


      })
    }


    function addCart(pid) {

      //       给用户购物车中添加商品 接口

      // 接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php
      // 接口请求方式：get
      // 接口参数：
      //      uid  用户id
      //      pid  商品id
      //      pnum  要添加的商品数量
      console.log(pid);
      let uid = localStorage.getItem("uid")
      console.log(uid);
      let num = document.querySelector('#num').value;
      console.log(num);
      let url = "http://jx.xuzhixiang.top/ap/api/add-product.php";

      axios.get(url, {
        params: {
          uid,
          pid,
          pnum: num
        },
      }).then(function (res) {
        console.log(res);
        alert('加入购物车成功');
      }).catch((err) => {
        alert('加入失败');
      })


    }


    let moveUp = document.querySelector('.top-left a');
    console.log(moveUp.offsetTop);
    // let Y = moveUp.offsetTop;
    let spend = 2;
    let Y = moveUp.offsetTop;

    moveUp.timer = setInterval(() => {


      moveUp.style.top = moveUp.offsetTop - spend + "px";
      if (moveUp.offsetTop <= -30) {
        // clearInterval(moveUp.timer)
        moveUp.style.top = "4px";
      }

    }, 100);

  </script>
</body>

</html>